<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>立项信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/app.css">
    <style>
        .info-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .info-label {
            font-weight: bold;
            width: 80px;
            margin-right: 10px;
        }

        .info-content {
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            padding: 6px 10px;
            background: #fafafa;
            flex: 1;
            min-height: 24px;
            line-height: 20px;
        }

        .three-row {
            display: flex;
            margin-bottom: 15px;
        }

        .three-item {
            flex: 1;
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .three-item:last-child {
            margin-right: 0;
        }

        .access-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .access-items {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .access-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .access-value {
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            padding: 6px 10px;
            min-width: 50px;
            text-align: center;
            background: #fafafa;
            margin-left: 8px;
        }

        .discount-row {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .discount-content {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .discount-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }

        .discount-value {
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            padding: 6px 10px;
            min-width: 50px;
            text-align: center;
            background: #fafafa;
            margin-left: 8px;
        }

        .checkbox-item {
            border: 1px solid #e6e6e6;
            border-radius: 2px;
            padding: 6px 10px;
            background: #fafafa;
            margin-right: 15px;
        }

        .btn-container {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="layui-container" style="overflow: auto;">
        <div style="padding: 10px;">
            <!-- 项目名称 -->
            <div class="info-row">
                <div class="info-label">项目名称</div>
                <div class="info-content" id="name-display"></div>
            </div>

            <!-- 项目类型 -->
            <div class="access-row">
                <div class="info-label">设计信息</div>
                <div class="access-items">
                    <div class="access-item">
                        <span>项目编码</span>
                        <div class="access-value" id="project_code-display"></div>
                    </div>
                    <div class="access-item">
                        <span>设计人</span>
                        <div class="access-value" id="designer-display"></div>
                    </div>
                    <div class="access-item">
                        <span>审核人</span>
                        <div class="access-value" id="reviewer-display"></div>
                    </div>
                </div>
            </div>

            <!-- 业务类型、建设类型、项目审核 -->
            <div class="three-row">

                <div class="three-item">
                    <div class="info-label">项目类型</div>
                    <div class="info-content" id="project_type-display"></div>
                </div>
                <div class="three-item">
                    <div class="info-label">业务类型</div>
                    <div class="info-content" id="business_type-display"></div>
                </div>
                <div class="three-item">
                    <div class="info-label">建设类型</div>
                    <div class="info-content" id="construction_type-display"></div>
                </div>
            </div>

            <!-- 项目总述 -->
            <div class="info-row">
                <div class="info-label">项目总述</div>
                <div class="info-content" id="project_overview-display" style="min-height: 60px;"></div>
            </div>

            <!-- 技术分析 -->
            <div class="info-row">
                <div class="info-label">技术分析</div>
                <div class="info-content" id="technical_analysis-display" style="min-height: 60px;"></div>
            </div>

            <!-- 接入覆盖 -->
            <div class="access-row">
                <div class="info-label">接入覆盖</div>
                <div class="access-items">
                    <div class="access-item">
                        <span>现有点位</span>
                        <div class="access-value" id="point_old-display">0</div>
                    </div>
                    <div class="access-item">
                        <span>新建点位</span>
                        <div class="access-value" id="point_new-display">0</div>
                    </div>
                    <div class="access-item">
                        <span>单点成本</span>
                        <div class="access-value" id="point_cost-display">0</div>
                    </div>
                    <div class="access-item">
                        <span>回收周期</span>
                        <div class="access-value" id="recycle_cycle-display">0</div>
                    </div>
                </div>
            </div>

            <!-- 收益说明 -->
            <div class="info-row">
                <div class="info-label">收益说明</div>
                <div class="info-content" id="profit_statement-display" style="min-height: 40px;"></div>
            </div>

            <!-- 下浮费用 -->
            <div class="discount-row">
                <div class="info-label">下浮费用</div>
                <div class="discount-content">
                    <div class="discount-item">
                        <span>人工费下浮</span>
                        <div class="discount-value" id="discount_labor-display">75%</div>
                    </div>
                    <div class="checkbox-item" id="enable_machine-display">未启用机械台班</div>
                    <div class="checkbox-item" id="enable_instrument-display">未启用仪器仪表</div>
                </div>
            </div>

            <!-- 关闭按钮 -->
            <div class="btn-container">
                <button class="layui-btn layui-btn-primary" type="button" id="btn-close">关闭</button>
            </div>
        </div>
    </div>

    <script src="/js/config/api.js"></script>
    <script src="/js/http.js"></script>
    <script src="/layui/layui.js"></script>
    <script>
        layui.use(['layer'], function () {
            var layer = layui.layer;
            var $ = layui.$;

            var designCode = getUrlParam("design_code") || '';

            $(document).ready(function () {
                loadProjectData();
            });

            function loadProjectData() {
                http.get(API_CONFIG.ENDPOINTS.GET_PROJECT_BASE + '?design_code=' + designCode)
                    .then(function (res) {
                        if (res.code === 0) {
                            displayProjectData(res.data);
                        } else {
                            layer.msg(res.msg || '获取项目信息失败', { icon: 2 });
                        }
                    })
                    .catch(function (err) {
                        var errorMsg = '请求失败: ';
                        if (err.responseJSON && err.responseJSON.error) {
                            errorMsg += err.responseJSON.error;
                        } else {
                            errorMsg += err.statusText;
                        }
                        layer.msg(errorMsg, { icon: 2 });
                        console.error('Error:', err);
                    });
            }

            function displayProjectData(data) {
                $('#name-display').text(data.name || '');
                $('#project_type-display').text(data.project_type || '');
                $('#project_code-display').text(data.design_code || '');
                $('#designer-display').text(data.designer || '');
                $('#business_type-display').text(data.business_type || '');
                $('#construction_type-display').text(data.construction_type || '');
                $('#project_overview-display').text(data.project_overview || '');
                $('#technical_analysis-display').text(data.technical_analysis || '工程中涉及登高、用火、强电、有毒气体、可燃气体等危险作业时，请施工人员严格遵守操作规章，佩戴相应安全装备进行作业。');

                $('#point_old-display').text(data.point_old || '0');
                $('#point_new-display').text(data.point_new || '0');
                //$('#port_count-display').text(data.port_count || '0');
                $('#profit_statement-display').text(data.profit_statement || '');

                $('#discount_labor-display').text((data.discount_labor || '75') + '%');

                $('#enable_machine-display').text(data.enable_machine ? '启用机械台班' : '未启用机械台班');
                $('#enable_instrument-display').text(data.enable_instrument ? '启用仪器仪表' : '未启用仪器仪表');

                if (data.reviewer) {
                    loadReviewerName(data.reviewer);
                } else {
                    $('#reviewer-display').text('未指定');
                }
            }

            function loadReviewerName(reviewerId) {
                http.get(API_CONFIG.ENDPOINTS.GET_PROJECT_REVIEWER)
                    .then(function (res) {
                        if (res.code === 0 && res.data && res.data.length > 0) {
                            var reviewer = res.data.find(function (item) {
                                return item.user_id == reviewerId;
                            });
                            if (reviewer) {
                                $('#reviewer-display').text(reviewer.user_name);
                            } else {
                                $('#reviewer-display').text('未知审核人员');
                            }
                        } else {
                            $('#reviewer-display').text('加载失败');
                        }
                    })
                    .catch(function (err) {
                        $('#reviewer-display').text('加载失败');
                        console.error('获取审核人员错误:', err);
                    });
            }

            $('#btn-close').click(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            });

            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                return r ? decodeURIComponent(r[2]) : null;
            }
        });
    </script>
</body>

</html>